<template>
  <div class="mui-numbox">
    <button
      class="mui-btn mui-btn-numbox-minus"
      type="button"
      @click.stop="subtract"
      :disabled="subDis"
    >
      -
    </button>
    <input class="mui-input-numbox" type="number" :value="currentCount" />
    <button
      class="mui-btn mui-btn-numbox-plus"
      type="button"
      @click.stop="plus"
      :disabled="plusDis"
    >
      +
    </button>
  </div>
</template>
<script>
export default {
  props: [
    "initCount", //初始值
    "min", //下限
    "max", //上限
    "goodsId",//此数字框对应的商品id
    'isChangeStore',
  ],
  data() {
    return {
      currentCount: 1,
      plusDis: false,
      subDis: false,
    };
  },
  methods: {
    setDisable() {
      if (this.currentCount >= this.max) {
        (this.plusDis = true), (this.subDis = false);
      } else {
        if (this.currentCount <= this.min) {
          this.plusDis = false;
          this.subDis = true;
        } else {
          this.plusDis = false;
          this.subDis = false;
        }
      }
    },
    plus() {
      if (this.currentCount <= this.max) {
        this.currentCount++;
      }
      this.setDisable();
    },
    subtract() {
      if (this.currentCount > this.min) {
        this.currentCount--;
      }
      this.setDisable();
    },
  },
  created() {
    this.currentCount = this.initCount;
  },
  watch:{
    'currentCount':function(newValue,oldValue){
      this.$emit('getCount',newValue);
      if(this.isChangeStore){
        var goodsInfo = {id:this.goodsId,count:this.currentCount}
        this.$store.commit('updateStore',goodsInfo)
      }
      
    }
  }
};
</script>
<style lang="less">
</style>